<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none
        }

        .container {
            width: 800px;
            border: 1px solid red;
            margin: 0px auto;
            padding: 20px;
        }

        .title {
            display: flex;
            align-items: center;
        }

        .title input[type="text"] {
            height: 30px;
            margin: 0px 10px;
            flex: 1;
        }

        .optionList li {
            display: flex;
            align-items: center;
            margin: 10px 0px;
        }

        .optionList li input[type="text"] {
            height: 22px;
            margin: 0px 10px;
        }

        label {
            width: 40px;
            text-align: right;
        }

        label::after {
            content: ":"
        }

        .btn-group {
            display: flex;
            width: 80px;
            justify-content: space-between;
        }

        .answer-group .button {
            margin: 0px 5px;
        }

        .button.more {
            width: 150px;
            display: block !important;
            margin: 10px 25px;
        }
    </style>
    <link href="https://cdn.bootcss.com/font-awesome/5.8.2/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/Buttons/2.0.0/css/buttons.min.css" rel="stylesheet">
    <link rel="stylesheet" href=" https://cdn.jsdelivr.net/npm/pretty-checkbox@3.0/dist/pretty-checkbox.min.css">
</head>

<body>
    <div class="container">
        <div class="title">
            <label for="title">标题</label>
            <input type="text" id="title" tabindex="1">
        </div>
        <fieldset style="padding: 10px;margin: 20px 0;">
            <legend>选项列表</legend>
            <ul class="optionList">
                <li>
                    <label for="A">A</label>
                    <input type="text" id="A" tabindex="2">
                    <div class="btn-group">
                        <button class="button up button-highlight  button-circle button-tiny">
                            <i class="fa fa-arrow-up" aria-hidden="true"></i>
                        </button>
                        <button class="button down button-highlight  button-circle button-tiny">
                            <i class="fa fa-arrow-down" aria-hidden="true"></i>
                        </button>
                        <button class="button del button-caution button-circle button-tiny">
                            <i class="fa fa-minus" aria-hidden="true"></i>
                        </button>
                    </div>
                </li>
                <li>
                    <label for="B">B</label>
                    <input type="text" id="B" tabindex="3">
                    <div class="btn-group">
                        <button class="button up button-highlight  button-circle button-tiny">
                            <i class="fa fa-arrow-up" aria-hidden="true"></i>
                        </button>
                        <button class="button down button-highlight  button-circle button-tiny">
                            <i class="fa fa-arrow-down" aria-hidden="true"></i>
                        </button>
                        <button class="button del button-caution button-circle button-tiny">
                            <i class="fa fa-minus" aria-hidden="true"></i>
                        </button>
                    </div>
                </li>
                <li>
                    <label for="C">C</label>
                    <input type="text" id="C" tabindex="4">
                    <div class="btn-group">
                        <button class="button up button-highlight  button-circle button-tiny">
                            <i class="fa fa-arrow-up" aria-hidden="true"></i>
                        </button>
                        <button class="button down button-highlight  button-circle button-tiny">
                            <i class="fa fa-arrow-down" aria-hidden="true"></i>
                        </button>
                        <button class="button del button-caution button-circle button-tiny">
                            <i class="fa fa-minus" aria-hidden="true"></i>
                        </button>
                    </div>
                </li>
                <li>
                    <label for="D">D</label>
                    <input type="text" id="D" tabindex="5">
                    <div class="btn-group">
                        <button class="button up button-highlight  button-circle button-tiny">
                            <i class="fa fa-arrow-up" aria-hidden="true"></i>
                        </button>
                        <button class="button down button-highlight  button-circle button-tiny">
                            <i class="fa fa-arrow-down" aria-hidden="true"></i>
                        </button>
                        <button class="button del button-caution button-circle button-tiny">
                            <i class="fa fa-minus" aria-hidden="true"></i>
                        </button>
                    </div>
                </li>
            </ul>
            <a href="javascript:;" class="more button  button-primary button-rounded button-small">
                <i class="fa fa-plus" aria-hidden="true"></i>
                添加选项
            </a>
        </fieldset>
        <div class="title">
            <label for="title">答案</label>
            <div class="answer-group"></div>
        </div>
    </div>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <script>
        $(() => {
            var optionName = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"

            $(".answer-group").on("click", ".button", function () {
                $(this).addClass("button-royal").siblings(".button-royal").removeClass("button-royal")
            })

            //统一的渲染方法
            function render() {
                $(".answer-group").empty()

                $(".optionList>li").each(function (i) {
                    $(this).find(".button").show()

                    if (i === 0) {
                        $(this).find(".button.up").hide()
                    }

                    if (i === $(".optionList>li").length - 1) {
                        $(this).find(".button.down").hide()
                    }

                    $(this).find("label").text(optionName[i])


                    $(".answer-group").append(
                        `
                        <button class="button button-circle button-tiny">
                            <i class="fa" aria-hidden="true">${optionName[i]}</i>
                        </button>`
                    )

                })

                if ($(".optionList>li").length === 2) {
                    $(".button.del").hide()
                }
            }

            render()

            $(".more").click(function () {
                $(".optionList").append(
                    `
                <li>
                    <label for="@">@</label>
                    <input type="text" id="@" tabindex="2">
                    <div class="btn-group">
                        <button class="button up button-highlight  button-circle button-tiny">
                            <i class="fa fa-arrow-up" aria-hidden="true"></i>
                        </button>
                        <button class="button down button-highlight  button-circle button-tiny">
                            <i class="fa fa-arrow-down" aria-hidden="true"></i>
                        </button>
                        <button class="button del button-caution button-circle button-tiny">
                            <i class="fa fa-minus" aria-hidden="true"></i>
                        </button>
                    </div>
                </li>`
                )

                render()
            })

            //事件委托
            $(".optionList").on("click", ".del", function () {
                $(this).parents("li").remove()
                render()
            })

            $(".optionList").on("click", ".up", function () {
                var mine = $(this).parents("li").find('input[type="text"]').val()
                var yours = $(this).parents("li").prev().find('input[type="text"]').val()

                $(this).parents("li").find('input[type="text"]').val(yours)
                $(this).parents("li").prev().find('input[type="text"]').val(mine)

            })

            $(".optionList").on("click", ".down", function () {
                var mine = $(this).parents("li").find('input[type="text"]').val()
                var yours = $(this).parents("li").next().find('input[type="text"]').val()

                $(this).parents("li").find('input[type="text"]').val(yours)
                $(this).parents("li").next().find('input[type="text"]').val(mine)
            })
        })
    </script>
</body>

</html>